<template>
  <label>
    <span>{{ label }}</span>
    <input v-bind="$attrs" v-on="my" />
  </label>
</template>

<script>
export default {
  name: "BaseInput",

  props: ["label"],

  // 禁用非prop属性继承
  inheritAttrs: false,

  // $listeners => input 事件做一下修改
  computed: {
    // my() {
    //   return {
    //     ...this.$listeners,
    //     // 原生事件
    //     input: function (event) {
    //       console.log("123", event, this);
    //       // 触发自定义事件
    //       this.$emit("input", event.target.value);
    //     },
    //   };
    // },

    // my() {
    //   const that = this;

    //   return {
    //     ...this.$listeners,
    //     // 原生事件
    //     input: function (event) {
    //       console.log("123", event, that);
    //       // 触发自定义事件
    //       that.$emit("input", event.target.value);
    //     },
    //   };
    // },

    my() {
      return {
        ...this.$listeners,
        // 原生事件 改写 $listeners 里面 的 input 函数
        input: (event) => {
          console.log("123", event, this);
          // 触发自定义事件
          this.$emit("input", event.target.value);
        },
      };
    },
  },
};
</script>
